<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="a_vuejs/vue.global.js"></script>

</head>
<body>

<div id="app">
    <h3>插槽:在调用组件才会有插槽这个概念</h3>
    <h3>插槽:子组件中一个位置 是可以通过父组件动态传递过来的</h3>
    <coma>
        <div style="width: 200px;height: 50px;background-color: yellow">这里是父组件传递过来的模块</div>
    </coma>
    <br/>
    <coma>
        <h3>这里是我又一次传递小的模块</h3>
    </coma>
    <br/>
    <coma>
        <span style="background-color: darkorange">这里是span模块</span>
    </coma>
</div>

</body>

<script>

    //匿名插槽
    //slot:相当于一个占位 留了个空位置 让父组件调用的时候去填充
    const coma = {
        template:'<div style="width: 300px;height: 200px;background-color: crimson">这里是子组件 <slot></slot>  </div> '
    }

    Vue.createApp({
        components:{
            'coma':coma
        }
    }).mount("#app")
</script>

</html>